import React, {Component} from 'react';
import {withRouter} from "react-router-dom";
import NavBarMy from "../navbar/NavBarMy";
import SearchInto from "../searchInto/SearchInto";
import style from './Category.module.scss';
import {getCategories} from '../../api/api';

class Category extends Component {
    state={
        categories:[],// 全部的分类的信息
        selectIndex:0,
        context:[]
    }
    async componentDidMount() {
        let res=await getCategories();
        let message=res.message||[];
        this.setState({
            categories:message,
            context:message[0],
            selectIndex:message[0].cat_id
        })
    }
    leftItem={
        background:'#ea4350',
        color:'white'
    }
    leftItemClick=(item,i)=>{
        this.setState({
            selectIndex:item,
            context:this.state.categories[i]
        })
    }
    productHandleClick=(id)=>{
        this.props.history.push("goodList?cid="+id)
    }
    render() {
        return (
            <div className={style.categoryBox}>
                <NavBarMy  title='商品分类' left={false}></NavBarMy>
                <SearchInto ></SearchInto>
                <div className={style.category}>
                    <div className={style.categoryLeft}>
                        <div>{
                            this.state.categories.map((v,i)=>{
                                return (<div
                                    style={(this.state.selectIndex===v.cat_id?this.leftItem:{})}
                                    className={style.leftItem}
                                    key={v.cat_id}
                                    onClick={()=>{this.leftItemClick(v.cat_id,i)}}
                                >{v.cat_name}</div>)
                            })
                        }</div>
                    </div>
                    <div className={style.categoryRight}>
                        <div>{this.state.context.children&&this.state.context.children.map((v)=>{
                            return (<div key={v.cat_id}>
                                <div className={style.rightTitle}>/{v.cat_name}/</div>
                                <div className={style.rightBox}>{v.children&&v.children.map((item)=>{
                                    return (<div
                                        className={style.rightItem}
                                        key={item.cat_id}
                                        onClick={()=>{this.productHandleClick(item.cat_id)}}
                                    >
                                        <div style={{width:'50px',height:'50px'}}><img style={{width:'100%',height:'100%'}} alt='' src={item.cat_icon}/></div>
                                        <div style={{textAlign:'center'}}>{item.cat_name}</div>
                                    </div>)
                                })}</div>
                            </div>)
                        })}</div>
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(Category);
